<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>北京科技报</title>
		<link href="css/common.css" rel="stylesheet">
		<link href="css/header.css" rel="stylesheet">
		<link href="css/footer.css" rel="stylesheet">
		<link href="css/report.css" rel="stylesheet">
		<link href="css/bookstarp.css" rel="stylesheet">
		<link href="css/swiper.css" rel="stylesheet">
		<script src="js/swiper.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="vue_det">
			<div id="header" class="header-box">
				<div class="header flex align-end">
					<div class="flex-one">
						<img class="header-logo" src="images/logoff.png" />
						<div class="font-12 color-ff">聚焦科学传播 弘扬科学精神</div>
					</div>
					<div class="header-search-btn">
						<img class="header-search" src="images/search.png" />
					</div>
				</div>
				<div class="padding-lr-12 bg-ff" style="height: 43px;line-height: 43px;">
					<span class="font-12">当前位置：</span>
					<span class="font-12">首页</span>
					<span class="font-12">＞</span>
					<span class="font-12 color-main">电子版</span>
				</div>
				<div class="flex align-center bg-ff padding-lr-12">
					<div class="header-xian flex-one"></div>
					<div class="header-radius"></div>
				</div>
			</div>
			<div class="margin-top-120" :style="height">
				<div class="flex align-center justify-between padding-lr-12" style="height: 60px;padding-top: 10px;box-sizing: border-box;">
					<div>
						<div class="font-13 color-main text-bold">{{end_year}}年{{end_month}}月</div>
						<div class="font-13 color-main">
							<span class="font-20 text-bold color-main">{{end_day}}</span>
							<span class="font-13 color-main margin-left-4">周日</span>
						</div>
					</div>
					<div class="flex align-center" v-on:click="calendar_flag=true">
						<span class="font-14">往期</span>
						<img class="wangqi-img" src="images/wangqi.png" />
					</div>
				</div>
				<div class="swiper-my bg-ff" :style="swiper_height">
					<div class="swiper-box">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<img class="swiper-img" src="images/app.png">
									
								</div>
								<div class="swiper-slide">
									<img class="swiper-img" src="images/footer1.png">
								</div>
								<div class="swiper-slide">
									<img class="swiper-img" src="images/footer5.png">
								</div>
								<!-- 更多 slide -->
							</div>
						</div>
					</div>
				</div>
				<div class="flex align-center justify-between padding-lr-12" style="height: 50px;">
					<div class="swiper-my-button-left flex align-center">
						<img class="s-img" src="images/rs.png" />
						<span class="font-14 margin-left-8">上一版</span>
					</div>
					<div class="font-14">第{{paper_index}}版</div>
					<div class="swiper-my-button-next flex align-center">
						<span class="font-14">下一版</span>
						<img class="s-img margin-left-8" src="images/ls.png" />
					</div>
				</div>
			</div>
			<div id="footer">
				<div class="footer-box">
					<div class="container">
						<div class="footer-top flex justify-between align-center">
							<a class="font-12 color-ff">关于我们</a>
							<div class="shu-line"></div>
							<a class="font-12 color-ff">服务协议</a>
							<div class="shu-line"></div>
							<a class="font-12 color-ff">隐私说明</a>
							<div class="shu-line"></div>
							<a class="font-12 color-ff">联系我们</a>
						</div>
						<div class="text-center color-ff font-12 margin-top-24">
							<div>Powered by 北京科技报</div>
							<div class="margin-top-4">1998-2024 © BK-Media Inc.京ICP备10002591号-5</div>
						</div>
						<div class="text-center color-ff font-12 margin-top-16">
							<div class="flex">
								<div class="flex-one text-right">订阅电话：400 0885 266</div>
								<div class="flex-one text-left margin-left-20">投稿邮箱：kejish@163.com</div>
							</div>
							<div class="margin-top-4">地址：北京朝阳区白家庄东里23号院</div>
						</div>
						<div class="margin-top-14">
							<div class="row">
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer1.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer2.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer3.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer4.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer5.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer6.png" />
							</div>
						</div>
					</div>
				</div>
				<div class="downlod-box">
					<div class="container">
						<div class="flex align-center">
							<img class="logo-img" src="images/app.png" />
							<div class="flex-one font-13 margin-lr-6">下载APP客户单体验更多服务</div>
							<div class="but">去下载</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="layer-box" v-on:click="calendar_flag=false" v-if="calendar_flag">
				<div class="layer" v-on:click.stop v-if="is_show">
					<div class="position-relative flex align-center justify-center padding-tb-10 padding-lr-14">
						<img class="left-img" src="images/left.png" v-on:click="chooseMonth(1)" />
						<span class="font-13 text-9ca margin-lr-20 margin-top-4">{{all_date[date_index].year}}年{{all_date[date_index].month_text}}月</span>
						<img class="right-img" src="images/left.png" v-on:click="chooseMonth(2)" />
					</div>
					<div class="padding-bottom-12">
						<div class="flex align-center " style="height: 45px;">
							<div class="flex flex-column align-center justify-center width" v-for="(item,index) in week_arr" :key='index'>
								<div class="font-13 text-9ca">{{item.week}}</div>
							</div>
						</div>
						<div class="flex flex-wrap">
							<div class="position-relative flex justify-center width margin-top-15" v-for="(item,index) in all_date[date_index].days" :key='index' @click="chooseDay(index)">
								<div class="calendar font-15" :class="[item.is_select?'active':'', item.is_choose?'color-main':'text-9ca']">{{item.num}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script>
	var vm = new Vue({
		el: '#vue_det',
		data: {
			height:'',
			swiper_height:'',
			paper_index:1,
			calendar_flag:false,
			is_show:false,
			dayList:['2024-07-15','2024-07-17'],
			now_year:'',  //当前年份
			now_month:'', //当前月份
			now_day:'', //当前日
			week_arr:[
				{week:'日',span:'Sun',is_week:false},
				{week:'一',span:'Mon',is_week:false},
				{week:'二',span:'Tue',is_week:false},
				{week:'三',span:'Wed',is_week:false},
				{week:'四',span:'Thu',is_week:false},
				{week:'五',span:'Fri',is_week:false},
				{week:'六',span:'Sat',is_week:false},
			],
			all_date:[],
			backup_date:[],
			date_index:0,
			year:'', // 已选年份
			month:'', //已选月份
			day:'',  //已选日
			end_year:'',
			end_month:'',
			end_day:'',
			choose_day:'',
			days:[],//当月的日期列表
			daynum:[31,28,31,30,31,30,31,31,30,31,30,31],//1-12月每个月的天数
			month_text:['一','二','三','四','五','六','七','八','九','十','十一','十二'],
		},
		mounted: function() {
			var header_element = document.getElementById("header");
			var header_height = header_element.offsetHeight;
			this.height = `height: calc( 100vh - ${header_height}px - 80px)`;
			this.swiper_height = `height: calc( 100vh - ${header_height}px - 190px)`;
			
			const that = this
			var mySwiper = new Swiper('.swiper-container', {
				speed: 600,
				centeredSlides: true,
				observer:true,
				prevButton:'.swiper-my-button-left',
				nextButton:'.swiper-my-button-next',
				onSlideChangeStart: function(swiper){
					that.paper_index = swiper.activeIndex +1
				},
			
			});
			this.paper_index = mySwiper.activeIndex +1
			let nowDate = new Date()
			this.now_year = nowDate.getFullYear()
			this.now_month = nowDate.getMonth()+1
			this.now_day = nowDate.getDate()
			
			this.choose_day = this.dayList[this.dayList.length-1]
			this.end_year = this.choose_day?Number(this.choose_day.substring(0,4)):this.now_year
			this.end_month = this.choose_day?Number(this.choose_day.substring(5,7)):this.now_month
			this.end_day = this.choose_day?Number(this.choose_day.substring(8,10)):this.now_day
			this.year = this.choose_day?Number(this.choose_day.substring(0,4)):this.now_year
			this.month = this.choose_day?Number(this.choose_day.substring(5,7)):this.now_month
			this.day = this.choose_day?Number(this.choose_day.substring(8,10)):this.now_day
			this.getAllData(this.now_year)
		},
		methods: {
			// 判断平年闰年
			isyear(val){
				if(val%4==0 && val%100!=0 || val%100==0 && val%400==0){
					this.daynum[1]=29
				}else{
					this.daynum[1]=28
				}
			},
			
			//日期转星期
			getWeekDay(now_date){
			    let week = ['日','一','二','三','四','五','六']
			    let date = new Date(now_date)
			    return week[date.getDay()]
			},
			
			//获取全部可选数据
			getAllData(yeardata){
				let date = []
				for(let i=0; i<12; i++){   //组成需要全部数据的数量
					let obj = {
						year:yeardata,
						month:i+1,
						month_text:this.month_text[i],
						days:[]
					}
					
					date.push(obj)
				}
				this.backup_date = date
				this.nowmonth(yeardata)
			},
			
			//获取全部可选数据
			getAllData(yeardata){
				let date = []
				for(let i=0; i<12; i++){   //组成需要全部数据的数量
					let obj = {
						year:yeardata,
						month:i+1,
						month_text:this.month_text[i],
						days:[]
					}
					
					date.push(obj)
				}
				this.backup_date = date
				this.nowmonth(yeardata)
			},
			
			// 计算每月多少天
			nowmonth(yeardata){
				this.isyear(yeardata)
				let day_arr = []
				for(let i=0; i<this.backup_date.length; i++){
					for(let j=0;j<this.daynum[i];j++){
						let obj = {
							is_choose :false ,
							is_select : false,
							is_now:false,
							is_head:false,   //每行开头第一个
							is_tail:false,   //每行最后一个
							num : j + 1,
							week:this.getWeekDay(`${this.backup_date[i].year}/${this.backup_date[i].month}/${j + 1}`),
							str:this.backup_date[i].year + '-' + (this.backup_date[i].month<10?'0'+this.backup_date[i].month:this.backup_date[i].month) + '-' +
							((j + 1)<10?'0'+(j + 1):(j + 1))
						}
						
						this.backup_date[i].days.push(obj)  //根据获取的天数向数组中添加日期
					}
				}
				
				//获取当月1号是周几，然后向数组中添加空字符串占位
				for(let i=0; i<this.backup_date.length; i++){
					var times=new Date(this.backup_date[i].year,this.backup_date[i].month-1,1).getDay() 
					
					for(let f=0;f<times;f++){
						this.backup_date[i].days.unshift("")
					}
				}
				
				//处理默认选中的数据
				for(let i=0; i<this.backup_date.length;i++){
					//筛选选中年月的index
					if(this.year==yeardata&&this.month==this.backup_date[i].month&&!this.is_show){
						this.date_index = i
					}
					for(let j=0; j<this.backup_date[i].days.length; j++){
						//筛选今天的日期
						if(this.year==yeardata&&this.month==this.backup_date[i].month&&this.day==this.backup_date[i].days[j].num){
							this.backup_date[i].days[j].is_select = true
						}
						
						if(this.dayList.indexOf(this.backup_date[i].days[j].str)>-1){
							this.backup_date[i].days[j].is_choose = true
						}
						// for(let k=0; k<this.dayList.length; k++){
						// 	console.log(k)
						// }
						
						//默认 每月第一天 最后一天 背景白色为选中状态
						if(this.backup_date[i].days[j].num==1){
							this.backup_date[i].days[j].is_head = true
						}
						this.backup_date[i].days[this.backup_date[i].days.length-1].is_tail = true
					}
					
				}
				this.all_date = JSON.parse(JSON.stringify(this.backup_date)) 
				console.log(this.all_date)
				this.is_show = true
			},
			
			//选择月份
			chooseMonth(type){
				// type 1减  2加
				let date_index = this.date_index
				date_index = type==1?date_index-1:date_index+1
				if(date_index==-1){
					this.date_index = this.all_date.length-1
					this.year = this.year - 1
					this.getAllData(this.year)
				}else if(date_index==12){
					this.date_index = 0
					this.year = this.year + 1
					this.getAllData(this.year)
				}else{
					this.date_index = date_index
				}
				
			},
			
			//选择日期
			chooseDay(index){
				let allDate = this.all_date
				let dateIndex = this.date_index
				if(!allDate[dateIndex].days[index].is_choose){
					return
				}
				this.choose_day =allDate[dateIndex].year + '-' + (allDate[dateIndex].month< 10 ? '0'+allDate[dateIndex].month:allDate[dateIndex].month) + '-' + 
				(allDate[dateIndex].days[index].num< 10 ? '0'+allDate[dateIndex].days[index].num:allDate[dateIndex].days[index].num)
				allDate.forEach(item=>{
					item.days.forEach(its=>{
						if(its){
							its.is_select = false
						}
					})
				})
				allDate[dateIndex].days[index].is_select = true
				this.end_end_year =  allDate[dateIndex].year
				this.end_month =  allDate[dateIndex].month
				this.end_day =  allDate[dateIndex].days[index].num
				this.calendar_flag = false
			},
		}
	})
</script>